<template>
  <div>
    <br>
    <el-form :inline="true">
      <el-form-item label="楼盘名">
        <el-input v-model="searchMap.house_title" placeholder="楼盘名"></el-input>
      </el-form-item>
      <el-form-item label="房源所在省份">
        <v-distpicker province="广东省" city="广州市" area="海珠区" @selected="onSelected"></v-distpicker>

      </el-form-item>

      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="handleEdit('')">新增</el-button>
    </el-form>
    <el-table
      :data="list"
      border
      style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"></el-table-column>
      <el-table-column prop="house_title" label="标题" width="180"></el-table-column>
      <el-table-column prop="house_desc" label="描述" width="80"></el-table-column>
      <el-table-column  label="图片" width="600">
        <template slot-scope="scope">
          <div class="block">
            <el-image v-for="(cp,index) in scope.row.image " :key="index"
                      style="width: 100px; height: 100px;margin: 10px;"
                      :src="cp">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="80"></el-table-column>

      <el-table-column prop="province" label="省份" width="180"></el-table-column>
      <el-table-column prop="city" label="城市" width="180"></el-table-column>
      <el-table-column prop="county" label="区/县" width="180"></el-table-column>
      <el-table-column prop="address" label="详细地址" width="280"></el-table-column>
      <el-table-column prop="last_opeing" label="最新开盘" width="180"></el-table-column>
      <el-table-column prop="house_type" label="楼盘户型" width="80"></el-table-column>
      <el-table-column prop="architecture_type" label="建筑类型" width="80"></el-table-column>
      <el-table-column prop="greeting_rate" label="绿化率" width="80"></el-table-column>
      <el-table-column prop="occupation" label="占地面积" width="80"></el-table-column>
      <el-table-column prop="volume_rate" label="容积率" width="80"></el-table-column>
      <el-table-column prop="architecture_area" label="建筑面积" width="80"></el-table-column>
      <el-table-column prop="property_type" label="物业类型" width="80"></el-table-column>
      <el-table-column prop="plan_household" label="规划户数" width="80"></el-table-column>
      <el-table-column prop="property_year" label="产权年限" width="80"></el-table-column>
      <el-table-column prop="floor_type" label="楼盘户型" width="80"></el-table-column>
      <el-table-column prop="property_management" label="物业公司" width="180"></el-table-column>
      <el-table-column prop="parking" label="车位配比" width="80"></el-table-column>
      <el-table-column prop="property_fee" label="物业费" width="180"></el-table-column>
      <el-table-column prop="heating_way" label="供暖方式" width="80"></el-table-column>
      <el-table-column prop="water_way" label="供水方式" width="80"></el-table-column>
      <el-table-column prop="elevator_way" label="供电方式" width="80"></el-table-column>
      <el-table-column prop="parking_info" label="车位" width="80"></el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.id)"  size="small">编辑</el-button>
          <el-button @click="handleDelete(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="fetchData"
      @current-change="fetchData"
      :current-page.sync="currentPage"
      :page-sizes="[5,10,20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="pojo.house_title"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="pojo.house_desc"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <div class="block">
            <li v-for="(cp,index) in pojo.image " :key="index" style="width: 100px; height: 100px;margin: 10px;display: inline-block;">
              <el-image
                :src="cp"  style="width:100%;height:100%">
              </el-image>

              <span class="el-icon-delete" style="margin:  0 auto;width: 100px;text-align:center;cursor: pointer" @click="deleteImage(cp,index)"></span>

            </li>

          </div>
          <el-upload
            action="http://localhost:9999/rent/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            :limit="limitImageCount"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="pojo.price"></el-input>
        </el-form-item>
        <el-form-item label="房源所在省份">
          <v-distpicker province="广东省" city="广州市" area="海珠区" @selected="onSelected"></v-distpicker>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="pojo.address"></el-input>
        </el-form-item>
        <el-form-item label="最新开盘">
          <el-input v-model="pojo.last_opeing"></el-input>
        </el-form-item>
        <el-form-item label="楼盘户型">
          <!--<el-radio-group v-model="pojo.house_type">
            <el-radio :label="3室2厅1卫">3室2厅1卫</el-radio>
            <el-radio :label="4室2厅2卫">4室2厅2卫</el-radio>
            <el-radio :label="4室2厅1卫">4室2厅1卫</el-radio>
            <el-radio :label="3室1厅1卫">3室1厅1卫</el-radio>
            <el-radio :label="3室1厅1卫">3室1厅1卫</el-radio>
            <el-radio :label="">其它</el-radio>
          </el-radio-group>-->
        </el-form-item>
        <el-form-item label="建筑类型">
          <el-input v-model="pojo.architecture_type"></el-input>
        </el-form-item>
        <el-form-item label="绿化率">
          <el-input v-model="pojo.greeting_rate"></el-input>
        </el-form-item>
        <el-form-item label="占地面积">
          <el-input v-model="pojo.occupation"></el-input>
        </el-form-item>
        <el-form-item label="容积率">
          <el-input v-model="pojo.volume_rate"></el-input>
        </el-form-item>
        <el-form-item label="建筑面积">
          <el-input v-model="pojo.architecture_area"></el-input>
        </el-form-item>
        <el-form-item label="物业类型">
          <el-input v-model="pojo.property_type"></el-input>
        </el-form-item>
        <el-form-item label="规划户数">
          <el-input v-model="pojo.plan_household"></el-input>
        </el-form-item>
        <el-form-item label="产权年限">
          <el-input v-model="pojo.property_year"></el-input>
        </el-form-item>
        <el-form-item label="楼盘户型">
          <el-input v-model="pojo.floor_type"></el-input>
        </el-form-item>
        <el-form-item label="物业公司">
          <el-input v-model="pojo.property_management"></el-input>
        </el-form-item>
        <el-form-item label="车位配比">
          <el-input v-model="pojo.parking"></el-input>
        </el-form-item>
        <el-form-item label="物业费">
          <el-input v-model="pojo.property_fee"></el-input>
        </el-form-item>
        <el-form-item label="供暖方式">

          <el-select v-model="pojo.heating_way" >
            <el-option label="集中供暖" value="集中供暖"></el-option>
            <el-option label="自供" value="自供"></el-option>
            <el-option label="其它" value="其它"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供水方式">
          <el-select v-model="pojo.water_way" >
            <el-option label="民水" value="民水"></el-option>
            <el-option label="自供" value="自供"></el-option>
            <el-option label="其它" value="其它"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供电方式">
          <el-select v-model="pojo.elevator_way" >
            <el-option label="民电" value="民电"></el-option>
            <el-option label="自供" value="自供"></el-option>
            <el-option label="其它" value="其它"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车位数">
          <el-input v-model="pojo.parking_info"></el-input>
        </el-form-item>

        <el-button type="primary" @click="handleSave()">保存</el-button>
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import newhouseApi from '@/api/newhouse'

  export default {
    data() {
      return {
        list: [],
        total: 0, // 总记录数
        currentPage: 1, // 当前页
        pageSize: 10, // 每页大小
        searchMap: {}, // 查询条件
        dialogFormVisible: false, // 编辑窗口是否可见
        pojo: {}, // 编辑表单绑定的实体对象
        cityList: [], // 城市列表
        dialogImageUrl: '',
        dialogVisible: false,
        uploadPicture: [],
        fileList:[],
        limitImageCount:6,
        id: '' // 当前用户编辑的ID
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        newhouseApi.search(this.currentPage, this.pageSize, this.searchMap).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
        })
      },
      handleSave() {
        if (this.pojo.id != null) {

          for (var i = 0; i < this.uploadPicture.length; i++) {
            this.pojo.image.push(this.uploadPicture[i]);
          }
        } else {
          this.pojo.image = [];
          for (var i = 0; i < this.uploadPicture.length; i++) {
            this.pojo.image.push(this.uploadPicture[i]);
          }
        }
        var im = JSON.stringify(this.pojo.image);
        this.pojo.image = im
        newhouseApi.update(this.id, this.pojo).then(response => {
          this.$message({
            message: response.message,
            type: (response.flag ? 'success' : 'error')
          })
          if (response.flag) { // 如果成功
            this.fetchData() // 刷新列表
            this.fileList = [];
          }
        })
        this.dialogFormVisible = false // 关闭窗口
      },
      handleEdit(id) {
        this.id = id
        this.dialogFormVisible = true // 打开窗口
        if (id !== '') { // 编辑
          newhouseApi.findById(id).then(response => {
            if (response.flag) {
              this.pojo = response.data
            }
          })
        } else {
          this.pojo = {} // 清空数据
        }
      },
      handleDelete(id) {
        this.$confirm('确定要删除此纪录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          newhouseApi.deleteById(id).then(response => {
            this.$message({message: response.message, type: (response.flag ? 'success' : 'error')})
            if (response.flag) {
              this.fetchData() // 刷新数据
            }
          })
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {

        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleUploadSuccess(response, file, fileList) {
        var total = 0;
        console.log(this.pojo)
        if (this.pojo.image != null ) {
          total =  fileList.length+this.pojo.image.length;

        }else{
          total = fileList.length;
        }

        if (total>6) {
          this.$alert('房源描述最多6张图片', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${action}`
              });
            }
          });
        }else{
          console.log("---------------")
          console.log(fileList)
          this.uploadPicture = [];
          for (var i = 0; i < fileList.length; i++) {
            console.log(fileList.length)
            this.uploadPicture.push("https://1321654.oss-cn-beijing.aliyuncs.com/"+fileList[i].response.src);
          }
        }
      },
      handleExceed(file, fileList) {

        this.$alert('房源描述最多6张图片', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${action}`
            });
          }
        });
      },

      deleteImage(src, index) {
        var picture = this.pojo.image;
        console.log(src + "   " + index)
        this.$confirm('确定要删除此图片吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          picture.splice(index,1);
        })
        this.pojo.image = picture;
      },
      onSelected(data) {
        this.pojo.province = data.province.value
        this.pojo.city = data.city.value
        this.pojo.county = data.area.value
      },
      onSearch(data){
        this.searchMap.province = data.province.value
        this.searchMap.city = data.city.value
        this.searchMap.county = data.area.value
      }
    }
  }
</script>
